<template>
  <div>
    <div class=" text-center text-xl">2023年巴勒斯坦以色列时控土地占比</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

var dataStyle = {
  normal: {
    label: { show: false },
    labelLine: { show: false },
    shadowBlur: 40,
    shadowColor: 'rgba(40, 40, 40, 0.5)',
  }
};
var placeHolderStyle = {
  normal: {
    color: 'rgba(0,0,0,0)',
    label: { show: false },
    labelLine: { show: false }
  },
  emphasis: {
    color: 'rgba(0,0,0,0)'
  }
};

// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})


// 渲染图表
const renderChart = () => {
  const options = {
    title: {
      left: 'center',
      top: 20,
      textStyle: {
        color: '#ccc'
      }
    },

    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)"
    },

    visualMap: {
      show: false,
      min: 500,
      max: 600,
      inRange: {
        //colorLightness: [0, 1]
      }
    },
    series: [{

      type: 'pie',
      radius: '50%',
      center: ['50%', '50%'],
      color: ['#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
      data: [{
        value: 9,
        name: '巴勒斯坦'
      },
      {
        value: 91,
        name: '以色列'
      },

      ].sort(function (a, b) {
        return a.value - b.value
      }),
      roseType: 'radius',

      label: {
        normal: {
          formatter: ['{c|{c}%}', '{b|{b}}'].join('\n'),
          rich: {
            c: {
              color: 'rgb(241,246,104)',
              fontSize: 20,
              fontWeight: 'bold',
              lineHeight: 5
            },
            b: {
              color: 'rgb(98,137,169)',
              fontSize: 15,
              height: 40
            },
          },
        }
      },
      labelLine: {
        normal: {
          lineStyle: {
            color: 'rgb(98,137,169)',
          },
          smooth: 0.2,
          length: 10,
          length2: 20,

        }
      },
      itemStyle: {
        normal: {
          shadowColor: 'rgba(0, 0, 0, 0.8)',
          shadowBlur: 50,
        }
      }
    }]
  };
  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
// watch(
//   () => regions,
//   () => {
//     renderChart()
//   }, {
//   deep: true
// }

// )
</script>

<style lang="scss" scoped></style>
